<template>
  <div class="container yjy">
    <div class="box">
      <Header>
        <router-link to='/user' slot='left' tag='i' class="iconfont icon-jiantou1"></router-link>
        订单列表
      </Header>
      <div class="ordercontent">
        <div class="order_box">
          <div class="orderlist">
            <van-search placeholder="请输入订单号" v-model="value" />
          </div>
          <div class="order-nav">
            <van-tabs v-model="activeName" @click="onclick">
              <van-tab title="待付款" name='0'>
                <div class="all_order">
                  <ul>
                    <li v-for="(item,index) of cartlist" :key="index">
                      <div class="top">
                        <a href="javascript:;">待付款</a>
                      </div>
                      <div class="center" v-for="(i,ind) of item.pro" :key="ind">
                        <div class="c-left">
                          <img :src="i.proimg" alt="加载失败" @click="detail(i.proid)">
                        </div>
                        <div class="c-center">
                          <span>{{i.proname}}</span>
                          <b>单价：{{ i.bigp || i.middlep }}</b>
                        </div>
                        <div class="c-right">x {{ item.num[ind] }}</div>
                      </div>
                      <div class="bottom">
                        <div class="bottom-left">
                          <span>共</span>
                          <b>{{ item.sum}}</b>
                          <span>件商品</span>&nbsp;
                          <span>￥ {{ item.sp }}.00</span>
                        </div>
                      </div>
                      <div class="order-type">
                        <span @click="delet(index)">取消订单</span>
                        <span @click="pay(index)">支付</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <h4>已经没有新数据了</h4>
              </van-tab>
              <van-tab title="待发货" name='1'>
                <div class="all_order">
                  <ul>
                    <li v-for="(item, index) of cartlist" :key="index">
                      <div class="top">
                        <a href="javascript:;">待发货</a>
                      </div>
                      <div class="center">
                        <div class="c-left">
                          <img :src="item.pro.proimg" alt="加载失败" @click="detail(item.pro.proid)">
                        </div>
                        <div class="c-center" >
                          <span>{{item.pro.proname}}</span>
                          <b>单价：{{item.pro.bigp || item.pro.middlep }}</b>
                        </div>
                        <div class="c-right">x {{item.num}}</div>
                      </div>
                      <div class="order-type">
                        <span @click="deliver(item.orderproid, index)">提醒发货</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <h4>已经没有新数据了</h4>
              </van-tab>
              <van-tab title="待收货" name='2'>
                <div class="all_order">
                  <ul>
                    <li v-for="(item, index) of cartlist" :key="index">
                      <div class="top">
                        <a href="javascript:;">待收货</a>
                      </div>
                      <div class="center">
                        <div class="c-left">
                          <img :src="item.pro.proimg" alt="加载失败" @click="detail(item.pro.proid)">
                        </div>
                        <div class="c-center" >
                          <span>{{item.pro.proname}}</span>
                          <b>单价：{{item.pro.bigp || item.pro.middlep }}</b>
                        </div>
                        <div class="c-right">x {{item.num}}</div>
                      </div>
                      <div class="order-type">
                        <span @click="confirm(index, item.orderproid)">确认收货</span>
                        <span @click="pj">查看物流</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <h4>已经没有新数据了</h4>
              </van-tab>
              <van-tab title="待评价" name='3'>
                <div class="all_order">
                  <ul>
                    <li v-for="(item, index) of cartlist" :key="index">
                      <div class="top">
                        <a href="javascript:;">待评价</a>
                      </div>
                      <div class="center">
                        <div class="c-left">
                          <img :src="item.pro.proimg" alt="加载失败"  @click="detail(item.pro.proid)">
                        </div>
                        <div class="c-center" >
                          <span>{{item.pro.proname}}</span>
                          <b>单价：{{item.pro.bigp || item.pro.middlep }}</b>
                        </div>
                        <div class="c-right">x {{item.num}}</div>
                      </div>
                      <div class="order-type">
                        <span @click="pj">去评价</span>
                      </div>
                    </li>
                  </ul>
                </div>
                <h4>已经没有新数据了</h4>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Header from '@/components/header.vue'
import axios from '@/utils/request'
import { DropdownMenu, DropdownItem, Search, Tab, Tabs, Toast } from 'vant'
Vue.use(DropdownMenu).use(DropdownItem)
Vue.use(Search)
Vue.use(Toast)
Vue.use(Tab).use(Tabs)
export default {
  data () {
    return {
      activeName: this.$route.params.active,
      cartlist: [],
      value: '',
      orderid: []
    }
  },
  created () {
    this.onclick(this.activeName)
  },
  components: {
    Header
  },
  methods: {
    pj () {
      Toast('暂未开放此功能')
    },
    onclick (name, title) {
      this.cartlist = []
      this.$router.push(`/order/${name}`)
      var userid = localStorage.userid
      if (name === '0') {
        axios.get('/order?userid=' + userid).then(res => {
          if (res.data.code === '25580') {
            this.cartlist = []
          } else {
            res.data.data.map(item => {
              let sum = 0
              let sp = 0
              let n = []
              let pro = []
              let num = []
              this.orderid.push(item.orderid)
              item.proid.map((i, index) => {
                n[index] = new Promise((resolve, reject) => {
                  axios.get('pro/detail?proid=' + i).then(res => {
                    pro.push(res.data[0])
                    num.push(item.num[0])
                    let price = res.data[0].bigp || res.data[0].middlep
                    sum += (item.num[0] * 1)
                    sp += price * item.num[0]
                    resolve()
                  })
                })
              })
              Promise.all(n).then(() => {
                this.cartlist.push({
                  pro,
                  num,
                  sum,
                  sp
                })
              })
            })
          }
        })
      } else {
        axios.get('/orderpro?userid=' + userid + '&state=' + name).then(res => {
          // console.log(res)
          if (res.data.code === '85772') {
            this.cartlist = []
          } else {
            var n = []
            var pro = []
            res.data.data.map((item, index) => {
              n[index] = new Promise((resolve, reject) => {
                axios.get('pro/detail?proid=' + item.proid).then(res => {
                  pro.push({
                    pro: res.data[0],
                    num: item.num,
                    orderproid: item.orid
                  })
                  resolve()
                })
              })
            })
            Promise.all(n).then(() => {
              this.cartlist = pro
            })
          }
        })
      }
    },
    delet (index) {
      axios.post('/order/del', {
        orderid: this.orderid[index]
      }).then(() => {
        Toast('取消订单成功')
        this.cartlist.splice(index, 1)
      })
    },
    pay (index) {
      sessionStorage.orderid = this.orderid[index]
      this.$router.push('/decision')
    },
    detail (proid) {
      this.$router.push(`/detail/${proid}`)
    },
    deliver (id, index) {
      axios.post('/orderpro/update', {
        orid: id,
        state: 2
      }).then(() => {
        this.cartlist.splice(index, 1)
      })
    },
    confirm (index, orid) {
      axios.post('/orderpro/update', {
        orid,
        state: 3
      }).then(() => {
        this.cartlist.splice(index, 1)
      })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
header {
  @include flexbox();
  @include justify-content(space-between);
}
.ordercontent {
  @include flex();
  @include rect(100%, auto);
  @include overflow();
  @include background-color(#eeeeee);
}
  .order_box {
     @include background-color(#eeeeee);
     @include rect(100%, 100%);
    .order-nav {
      .van-tabs__content {
        .all_order {
          width: 100%;
          height: auto;
          ul {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 0.05rem;
            li {
              width: 100%;
              background-color: #fff;
              display: flex;
              flex-direction: column;
              padding: 0 0.1rem;
              margin-bottom: 0.08rem;
              .top {
                width: 100%;
                height: 0.35rem;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid #eee;
                padding: 0 0.08rem;
                span {
                  display: inline-block;
                }
                a {
                  color: orange;
                }
              }
              .center {
                width: 100%;
                height: 1rem;
                display: flex;
                padding-top: 0.1rem;
                .c-left {
                  flex: 3;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  img {
                    display: block;
                    width: 0.9rem;
                    height: 0.9rem;
                    border: 1px solid black;
                  }
                }
                .c-center {
                  flex: 6;
                  padding-top: 0.1rem;
                  display: flex;
                  flex-direction: column;
                  span {
                    color:#e22
                  }
                  b {
                    font-weight: normal;
                  }
                }
                .c-right {
                  flex: 1;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
              .bottom {
                width: 100%;
                height: 0.3rem;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .bottom-left {
                  margin-right: 0.1rem;
                  span {
                    &:last-child {
                      color: #e22;
                    }
                  }
                }
                .bottom-right {
                  margin-right: 0.1rem;
                  b {
                    font-weight: normal;
                  }
                }
              }
              .order-type {
                width: 100%;
                height: 0.4rem;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                span {
                  width: 0.7rem;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 10px;
                  border: 1px solid gray;
                  margin: 0.1rem;
                  &:last-child {
                    color: rgb(255, 171, 102);
                    border-color: rgb(255, 171, 102);
                  }
                }
              }
            }
          }
        }
        h4 {
          text-align: center;
        }
      }
    }
  }
</style>
